<template>
    <div class="container">
        <header class="title clearfix">
          <div class="search-div">
            <el-input placeholder="请输入内容" v-model="page.findContent">
              <el-button @click="searchData" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <div class="row-div">
            <el-button v-if="auth&1" type="primary" @click="addData">添加权限</el-button>
            <el-button v-if="auth&4" type="danger"  @click="delData">批量删除</el-button>
          </div>
        </header>
        <main  class="table-div">
            <el-table
                @selection-change='getchecked'
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="authorder"
                    sortable
                    label="排序"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="authname"
                    sortable
                    label="权限名称"
                    width="110">
                </el-table-column>
                <el-table-column
                    prop="authid"
                    label="权限标识"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="authtype"
                    label="权限类型">
                </el-table-column>
                <el-table-column
                    prop="authurl"
                    label="权限路径">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="80">
                    <template slot-scope="scope">
                        <i v-if="auth&2" class="el-icon-edit icon-do" title="编辑"  @click="editOne(scope.row.id)"></i>
                        <i v-if="auth&4" class="el-icon-delete icon-do" title="删除"  @click="deleteOne(scope.row.id)"></i>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[5,10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.pageTotal">
            </el-pagination>
        </main>
    </div>
</template>

<script>
import { getPermissionList, delPermission } from '@/api/permission'
export default {
  data () {
    return {
      checkedIds: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        pageTotal: 20,
        findContent: ''
      },
      tableData: []
    }
  },
  computed: {
    auth () {
      return this.$store.getters.functionAuthState || sessionStorage.getItem('functionAuthState') || 0
    }
  },
  methods: {
    getList (pageNum, pageSize, findContent) {
      getPermissionList({ pageNo: pageNum, pageSize: pageSize, findContent: findContent }).then((data) => {
        if (data.result === 1) {
          this.tableData = data.data.list
          this.page.pageTotal = data.data.totalCount
        } else {
          this.tableData = []
        }
      })
    },
    getchecked (val) {
      this.checkedIds = val.map(v => {
        return v.id
      })
    },
    searchData () {
      this.getList(this.page.currentPage, this.page.pageSize, this.page.findContent)
    },
    addData () {
      this.$router.push({ name: 'PermissionAdd' })
    },
    editOne (id) {
      this.$router.push({ name: 'PermissionEdit', params: { id: id, page: this.page }})
    },
    delData () {
      if (this.checkedIds.length > 0) {
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delPermission({ ids: this.checkedIds.join(',') }).then((data) => {
            if (data.result === 1) {
              this.getList(this.page.currentPage, this.page.pageSize, this.page.findContent)
            }
          })
        })
      }
    },
    deleteOne (id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delPermission({ ids: id }).then((data) => {
          if (data.result === 1) {
            this.getList(this.page.currentPage, this.page.pageSize, this.page.findContent)
          }
        })
      })
    },
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList(this.page.currentPage, this.page.pageSize, this.page.findContent)
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList(this.page.currentPage, this.page.pageSize, this.page.findContent)
    }
  },
  beforeMount () {
    var pageInfo = this.$route.params.page
    if (pageInfo) {
      this.page = pageInfo
    }
    this.getList(this.page.currentPage, this.page.pageSize)
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table-div{
    width:90%;
    margin: 20px auto
}
.title{
    width:90%;
    margin: 10px auto;
    .search-div,.row-div{
      float: left;
    }
    .search-div{
      width: 200px;
      margin-right: 20px
    }
}
.el-pagination{
    text-align: center;
    margin:30px auto
}
</style>
